<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="spring" uri="http://www.springframework.org/tags"%>
<%@ taglib prefix="form" uri="http://www.springframework.org/tags/form"%>
<%@ taglib prefix="sec" uri="http://www.springframework.org/security/tags"%>
<c:set var="CONTEXT">${pageContext.request.contextPath}</c:set>
<c:set var="cssUrl">${pageContext.request.contextPath}/resources/css</c:set>
<c:set var="jsUrl">${pageContext.request.contextPath}/resources/js</c:set>
<!-- hojun start -->
<script type="text/javascript" src="//www.google.com/jsapi"></script>
<script type="text/javascript">
	google.load('visualization', '1', {'packages': ['geochart']});
	google.setOnLoadCallback(drawRegionsMap);
	
	 function drawRegionsMap() {
	   var data = google.visualization.arrayToDataTable([
	     ['Country', 'Popularity'],
	     ['Germany', 200],
	     ['United States', 300],
	     ['Brazil', 400],
	     ['Canada', 500],
	     ['France', 600],
	     ['RU', 700]
	   ]);
	
	   var options = {};
	
	   var chart = new google.visualization.GeoChart(document.getElementById('chart_div'));
	   chart.draw(data, options);
	};
</script>


<script type='text/javascript'>
     google.load('visualization', '1', {'packages': ['geochart']});
     google.setOnLoadCallback(drawMarkersMap);

      function drawMarkersMap() {
      var data = google.visualization.arrayToDataTable([
        ['City',   'Population', 'Area'],
        ['Seoul',      2761477,    1285.31]
      ]);

      var options = {
        region: 'KR',
        displayMode: 'markers',
        colorAxis: {colors: ['green', 'blue']}
      };

      var chart = new google.visualization.GeoChart(document.getElementById('chart_div2'));
      chart.draw(data, options);
    };
</script>

<ul class="nav nav-tabs" role="tablist" id="myTab">
  <li class="active"><a href="#chart_div" role="tab" data-toggle="tab">Region Geocharts</a></li>
  <li><a href="#chart_div2" role="tab" data-toggle="tab">Marker Geocharts</a></li>
</ul>

<div class="tab-content">
  <div class="tab-pane active" id="chart_div" style="width: 900px; height: 500px;"></div>
  <div class="tab-pane" id="chart_div2" style="width: 900px; height: 500px;"></div>
</div>

<script>
  $(function () {
    $('#myTab a:last').tab('show')
  })
</script>
<!--  hojun end -->






<h2>Publicmesh 메인화면</h2>
<ul>
	<li>사용중인 VM 목록?</li>
	<li>전체 비용</li>
	<li>승인 요청중인 회원?</li>
	<li></li>
</ul>
